<template>
  <q-layout view="hHh lpR fFf">

    <q-page-container>
      <router-view />
    </q-page-container>
    <q-footer>
      <q-toolbar class="text-secondary shadow-2 rounded-borders">
        <q-tabs v-model="tab" active-class="active-class" dense align="justify" indicator-color="primary"
          class="footer-tabs">
          <q-tab v-for="item in tabs" :icon=item.icon :name=item.name :key="item.name">
            <q-tooltip class="bg-accent" anchor="top middle" self="center middle" :delay="1000" :offset="[30, 30]">
              {{ item.text }}
            </q-tooltip>
          </q-tab>
        </q-tabs>
      </q-toolbar>
    </q-footer>

  </q-layout>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();

// 默认首页
let tab = ref('text')

const tabs = reactive([
  {
    name: 'text',
    icon: 'bi-textarea-t',
    text: '文本处理'
  },
  {
    name: 'excel_utl_to_pic',
    icon: 'bi-file-earmark-excel',
    text: '链接转换'
  },
  {
    name: 'data_diff',
    icon: 'bi-file-earmark-diff',
    text: '数据对比'
  },
  {
    name: 'box',
    icon: 'bi-box',
    text: '更多'
  }
])


watch(tab, (new_value, old_value) => {
  router.push(new_value)
})

</script>


<style scoped>
.q-footer {
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 8px;

  background-color: transparent;

}

.q-footer .footer-tabs {
  width: 100%;
}

.q-footer .q-toolbar {
  border-radius: 20px;
}

.active-class {
  color: #BE93C5;
  /* background-color: #1E293B; */
}

.q-tabs__content .q-tab {
  /* background-color: red; */
  border-radius: 40px;
}
</style>